import React from 'react';
export default class FloatLayout extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            show: this.props.show,
            title: this.props.title || ' ',
            closeText: this.props.closeText || '关闭',
            top: this.props.top || 0,
            left: this.props.left || 0,
            right: this.props.right || 0,
            bottom: this.props.bottom || 0,
            relative: this.props.relative
        };
    }

    componentDidMount () {
        const _this = this;

        function setSize () {
            const relative = _this.state.relative && (document.getElementById(_this.state.relative) || window),
                layoutWrap = document.getElementById('layoutWrap'),
                parentNode = layoutWrap !== null ? layoutWrap.parentNode : null,
                layoutContent = document.getElementById('layoutContent');
            setTimeout(() => {
                if (layoutWrap !== null) {
                    const h = relative ? parseInt(relative.offsetHeight) : window.innerHeight,
                        w = parentNode ? parseInt(parentNode.offsetWidth) : window.innerWidth;
                    layoutWrap.style.height = h + 'px';
                    layoutWrap.style.width = w + 'px';
                    layoutContent.style.height = (h - 48) + 'px';
                    layoutContent.style.overflow = 'auto';
                }
            }, 500);
        }

        setSize();
        window.onresize = () => {
            setSize();
        };
    }

    componentWillReceiveProps (nextProps) {
        const show = nextProps.show;
        if (show) {
            this.open();
        } else {
            this.close();
        }
    }

    open () {
        if (!this.state.show) {
            this.willOpen();
            this.setState({
                show: true
            }, () => {
                this.opened();
            });
        }
    }

    close () {
        if (this.state.show) {
            this.willClose();
            this.setState({
                show: false
            }, () => this.closed());
        }
    }

    willOpen () {
        if (typeof this.props.willOpen === 'function') {
            this.props.willOpen();
        }
    }

    opened () {
        if (typeof this.props.opened === 'function') {
            this.props.opened();
        }
    }

    willClose () {
        if (typeof this.props.willClose === 'function') {
            this.props.willClose();
        }
    }

    closed () {
        if (typeof this.props.closed === 'function') {
            this.props.closed();
        }
    }

    shutDown (e) {
        e.preventDefault();
        this.close();
    }

    render () {
        return (
            <div
                id="layoutWrap"
                style={{
                    display: this.state.show ? 'block' : 'none',
                    position: 'fixed',
                    top: this.state.top || 0,
                    left: this.state.left || 0,
                    zIndex: 99,
                    backgroundColor: '#fff'
                }}
            >
                <h2
                    style={{
                        padding: '0 128px 0 10px',
                        backgroundColor: '#eee',
                        borderBottom: '1px solid #ddd',
                        fontSize: '16px',
                        lineHeight: '48px',
                        height: '48px',
                        position: 'relative'
                    }}
                >
                    <div
                        style={{
                            float: 'left',
                            lineHeight: '48px',
                            height: '48px'
                        }}
                    >
                        {this.props.title}
                    </div>
                    <div
                        style={{
                            float: 'left',
                            lineHeight: '48px',
                            height: '48px',
                            marginLeft: '10px'
                        }}
                    >
                        {this.props.extra}
                    </div>
                    <a
                        onClick={this.shutDown.bind(this)}
                        style={{
                            position: 'absolute',
                            right: 0,
                            top: 0,
                            textAlign: 'center',
                            lineHeight: '48px',
                            height: '48px',
                            padding: '0 10px',
                            fontSize: '12px',
                            fontWeight: 'normal'
                        }}
                    >
                        {this.state.closeText}
                    </a>
                </h2>
                <div
                    id="layoutContent"
                >
                    {this.props.children}
                </div>
            </div>
        );
    }
}
